<template>
  <div>

    <Menu mode="horizontal"
          @on-select="handleName"
          active-name="1">
      <MenuItem name="1"
                style="margin-left: 80px">
      推荐
      </MenuItem>
      <MenuItem name="2">
      南京
      </MenuItem>
      <MenuItem name="3">
      国际
      </MenuItem>
      <MenuItem name="4">
      科技
      </MenuItem>
      <MenuItem name="5">
      历史
      </MenuItem>
      <MenuItem name="6">
      健康
      </MenuItem>
      <MenuItem name="7">
      房产
      </MenuItem>
      <MenuItem name="8">
      育儿
      </MenuItem>
    </Menu>
    <!-- 每个新闻的显示 -->
    <Row class="new_row_main"
         v-for="(item,index) in news"
         :key="index">

      <Col span="22">
      <Card :bordered="false"
            class="new_card">
        <p slot="title">{{ item.name }}</p>
        <p>{{ item.intro }}</p>
      </Card>
      </Col>
      <Col span="2">
      <Button @click="handleAlter(item.id)"
              class="news_button">修改</Button>
      <Button class="news_button"
              @click="handleRemove(item.id,index)">删除</Button>
      </Col>

    </Row>
    <div class="news_manage">
      <!-- 用卡片来表示新闻的标题和简介 -->

    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      news: []
    };
  },
  methods: {
    handleName: function(name) {
      let url = "/filter";
      this.$axios({
        method: "get",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          type: name,
          academy: "软件学院"
        }
      })
        .then(response => {
          this.news = response.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleRemove: function(id, index) {
      this.$Modal.confirm({
        title: "是否删除所选内容",
        content: "<p>点击确定进行删除</p>",
        onOk: () => {
          this.handleDelete(id, index);
        },
        onCancel: () => {
          this.$Message.info("删除已取消");
        }
      });
      //this.handleDelete(id,index);
    },
    handleDelete: function(id, index) {
      let url = "/delete";
      this.$axios({
        method: "post",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          id: id
        }
      })
        .then(response => {
          console.log(response.data);
          this.news.splice(index, 1);
          this.$Message.success("文章删除成功");
        })
        .catch(error => {
          this.$Message.error("删除失败");
          console.log(error);
        });
    },
    handleAlter: function(id) {
      this.$store.state.dialog.id = id
      this.$router.push("/editor");
      window.scrollTo(0, 0);
    }
  },
  mounted() {
    var that = this;
    let url = "/filter";
    this.$axios({
      method: "post",
      url: url,
      headers: {
        "Content-type": "application/x-www-form-urlencoded"
      },
      params: {
        type: 1,
        academy: "软件学院"
      }
    })
      .then(response => {
        this.news = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>



<style scoped>
.new_row_main {
  background: #eee;
  padding: 20px;
  margin: 1% 0% 1% 0%;
  border-radius: 1%;
}
.new_row_main .new_card {
  text-align: left;
}
.new_row_main .news_button {
  margin: 0% 2% 0% 2%;
  width: 94%;
  font-size: 200%;
}
.create_txt {
  width: 100%;
  padding: 0% 10% 0% 10%;
}
</style>
